<template>
	<view class="container">
		<view class="container__header">
			<view class="nav">
				<image class="nav-box" v-for="(itm, i) in navList" mode="widthFix" :src="itm.url" :key="i"></image>
			</view>
			<view class="tab-box">
				<view class="itm" v-for="(itm,i) in tabList" :key="i+itm.title">
					<image class="tab-icon" :src="itm.url" mode="widthFix"></image>
					<view class="title">
						{{ itm. title }}
					</view>
					<view class="subtitle">
						{{ itm.desc }}
					</view>
				</view>
			</view>
		</view>
		<view class="container__content">
			<view class="head">
				<view class="left">
					热销模版
				</view>
				<view class="right">
					全部模版
					<image class="icon" src="https://env-00jxh5u7zldw.normal.cloudstatic.cn/icons/arr_right.webp"></image>
				</view>
			</view>
			<view class="img-list">
				<scroll-view scroll-y="true" class="scroll-box">
					<view class="temp-box">
						<view class="itm" v-for="(itm,j) in tempList" :key="j+itm.title">
							<image class="icon" :src="itm.url" mode=""></image>
							<view class="name">
								{{ itm.title }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, toRefs } from 'vue';
	import { onShareAppMessage } from '@dcloudio/uni-app'
	import useScroll from '@/hooks/useScroll';
	// import { findPage } from '@/apis/article';
	const navList = ref<any>([{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_2.png' }]);
	const tabList = ref<any>([
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/icons/icon_06.webp', title: '万紫千红', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/icons/icon_05.webp', title: '映日荷花', desc: '敬请期待' },
	]);
	
	const tempList = ref<any>([
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '蛰虫始振', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '甘雨如酥', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '桃之夭夭', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '仲春之月', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '溱洧踏青', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '播厥百谷', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '鸣蜩在荫', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '禾黍盈畴', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '奄观铚艾', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '日永星火', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '温风始至', desc: '敬请期待' },
		{ url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_3.png', title: '蕴隆虫虫', desc: '敬请期待' },
	]);
	
	const list = ref<any[]>([])
	const { page, limit, isReachBottom } = toRefs({
		page: 1,
		limit: 20,
		isReachBottom: false
	})
	const init = async () => {
		getList();
	}
	// 示例
	const getList = async () => {
		const params = {
			page: page.value,
			limit: limit.value
		};
		// const data = await findPage(params);
		// if (page.value === 1) {
		// 	list.value = data;
		// } else {
		// 	list.value.push(...data);
		// }
		// isReachBottom.value = data.length < limit.value
	}
	// 设置滚动分页
	useScroll(getList, { page, limit, isReachBottom })
	// 初始化
	init();
	
	onShareAppMessage(() => {
		return {
			title: '木瓜笺',
			path: '/pages/index/index', // 必须使用绝对路径
			imageUrl: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_1.png' // 可选，分享图片路径
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		background: rgba(245, 245, 245, 1);
		width: 100%;
		height: 100vh;
		
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		&__header {
			width: 100%;
			height: 450rpx;
			position: relative;
			
			.nav-box {
				width: 100%;
				height: 152rpx;
			}
			.tab-box {
				width: 100%;
				height: 110rpx;
				position: absolute;
				bottom: -55rpx;
				left: 0;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 32rpx;
				
				.itm {
					border-radius: 10px;
					background: rgba(255, 255, 255, 1);
					width: 170px;
					height: 110px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					
					.tab-icon {
						width: 69rpx;
						height: 65rpx;
					}
					.title {
						font-size: 26rpx;
						margin: 8rpx 0;
						color: rgba(51, 51, 51, 1);
					}
					.subtitle {
						font-size: 22rpx;
						color: rgba(153, 153, 153, 1);
					}
				}
			}
		}
		&__content {
			margin-top: 200rpx;
			width: 100%;
			flex: 1;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 32rpx;
				
				.right {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: rgba(153, 153, 153, 1);
				}
				
				.icon {
					width: 11rpx;
					height: 20rpx;
					margin-left: 16rpx;
					cursor: pointer;
				}
			}
			.img-list {
				width: 100%;
				flex: 1;
				margin-top: 16rpx;
				overflow: hidden;
				.scroll-box {
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
				.temp-box {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					box-sizing: border-box;
					padding: 0 32rpx;
				}
				.itm {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 340rpx;
					margin-bottom: 16rpx;
					
					.icon {
						width: 340rpx;
						height: 286rpx;
						border-radius: 10rpx;
						margin-bottom: 16rpx;
					}
					.name {
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}
	}
</style>